<template>
    <div class="wrapper">
        <div class="videoItem" v-for="(item,index) in itemJson" :key="index" :id="`video-${item.videoId}`">
            <div class="info">
                <div class="title">{{item.title}}</div>
                <div class="img">
                    <img :src="item.sourceIcon" alt="">
                    <span class="from">{{item.source}}</span>
                    <span class="time">{{item.time}}</span>
                </div>
            </div>
            <div class="inner">
                <video-player class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="playsinline"
                    style="object-fit:fill"
                    :options="playerOptions(item)"
                    @play="onPlayerPlay($event,item)"
                    @pause="onPlayerPause($event,item)"
                    @ended="onPlayerEnded($event,item.videoId)"
                    @timeupdate="onPlayerTimeupdate($event)"
                    @canplay="onPlayerCanplay($event)"
                    @fullscreenchange="onPlayerFullScreenchange($event)"
                    @click="fullScreen"
                ></video-player>
                <div class="bottom">
                    <div>{{item.playCount || 100}}次观看</div>
                    <div><span>{{item.timeLong}}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { PostVideoTime } from '@/api/api'
export default {
    data() {
        return {
            dlb:''
        };
    },
    props: ['itemJson'],
    computed: {
        player() {
            return this.$refs.videoPlayer.player
        },
        playsinline(){
    		var ua = navigator.userAgent.toLocaleLowerCase();
                //x5内核
            if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                return false
            }else{
                //ios端
                return true				
            }
        }
    },
    methods:{
        ...mapMutations('user', [
            'set_DLBvalue',
        ]),
        playerOptions(item){
            return {
                autoplay: false, //如果true,浏览器准备好时开始回放。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "video/mp4",
                    src: item.videoLink //url地址
                }],
                poster: item.coverUrl, //你的封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: false,    //时间分隔符
                    durationDisplay: true, //总时间
                    remainingTimeDisplay: false, //倒计时时间
                    currentTimeDisplay: true, // 当前时间
                    volumeControl: false, // 声音控制键
                    playToggle: true, // 暂停和播放键
                    progressControl: true, // 进度条
                    fullscreenToggle: false // 全屏按钮
                }
            }
        },
        onPlayerPlay(player,item) {
            // console.log('player play!', player.currentTime())
            $(`#video-${item.videoId} .bottom`).hide();
            $(`#video-${item.videoId} .vjs-big-play-button`).hide();
            $(`#video-${item.videoId} .vjs-has-started .vjs-poster`).hide();
            
            this.$emit('sendCurVideoIndex','play',item.videoId)
            if( item.playState == '0' ){
                console.log('未播放 - 发送开始时间'+item.videoId)
                this.postStartTime(item.videoId);  // 未播放 - 发送开始时间
            }
        },
        onPlayerPause(player,item) {
            // console.log('player pause!', item.videoId)
            this.$emit('sendCurVideoIndex','pause',item.videoId)
            if( item.playState == '0' ){
                console.log('未播放 - 发送结束时间'+item.videoId)
                this.postEndTime(item.videoId);  // 未播放 - 发送结束时间
            }
        },
        onPlayerEnded(player,videoId) {
            // console.log('player ended!', player.currentTime())
            $(`#video-${videoId} .vjs-has-started .vjs-poster`).show();
        },
        onPlayerTimeupdate(player) {
            // console.log('player Timeupdate!', player.currentTime())
        },
        onPlayerCanplay(player) {
            // console.log('player Canplay!', player)
            //解决自动全屏
            var ua = navigator.userAgent.toLocaleLowerCase();
            //x5内核
            if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                $('body').find('video').attr('x-webkit-airplay',true).attr('x5-playsinline',true).attr('webkit-playsinline',true).attr('playsinline',true)
            }else{
                //ios端
                $('body').find('video').attr('webkit-playsinline',"true").attr('playsinline',"true") 
            }
        },
        fullScreen (player) {
            console.log(player.isFullscreen())
            // player.exitFullscreen()  //强制退出全屏，恢复正常大小
            // this.videoDialogVisible = true
        },
        postStartTime(videoId){
            PostVideoTime({
                "videoId":videoId,
                "startTime": new Date().getTime()
            })
        },
        postEndTime(videoId){
            PostVideoTime({
                "videoId":videoId,
                "endTime": new Date().getTime()
            }).then(res => {
                if( res.code == 200 ){
                    if( res.data && res.data.getDlb ){
                        this.dlb = res.data.getDlb
                    }else{
                        this.dlb = 0
                    }
                }else{
                    this.dlb = 0
                }
                this.set_DLBvalue(this.dlb)
                setTimeout(()=>{
                    this.set_DLBvalue(0)
                },2000)
            })
        }
    }
}
</script>

<style lang='stylus'>
.wrapper{
   .videoItem{
       padding:0 15px 20px 15px;
       border-bottom:1px solid #F2F3F9;
        .inner{
            position:relative;
            .bottom{
                position:absolute;
                bottom:10px;
                left:15px;
                right:15px;
                color:#fff;
                font-size:12px;
                display:flex;
                flex-direction: row;
                justify-content: space-between;
                div{
                    &:last-child{
                        display:inline-block;
                        width:50px;
                        height:16px;
                        text-align:center;
                        background:rgba(51,51,51,0.5);
                        border-radius:8px;
                        position:relative;
                        span{
                            position:absolute;
                            top:50%;
                            left:50%;
                            transform:translate(-50%,-50%);
                        }
                    }
                }
            }
        }
        .info{
            padding: 15px 0 5px 0;
            .title{
                font-size:16px;
                font-weight: bold;
                margin-bottom:5px;
                color:#333333;
                text-align: justify;
            }
            .img{
                font-size:11px;
                color:#BFBFBF;
                img{
                    width:22px;
                    height:22px;
                    display:inline-block;
                    margin-right:10px;
                    vertical-align: middle;
                    border-radius: 50%;
                }
                .time{
                    margin-left:10px;
                }
            }
        }
    } 
}
</style>
